<template>
  <main class="page-main">
    <FabricCanvas class="fabric-canvas" />
    <aside class="right-side">
      <ShapeList />
    </aside>
  </main>
</template>

<script setup>
import FabricCanvas from '@/components/FabricCanvas.vue'
import ShapeList from '@/components/ShapeList.vue';

const backgroundColor = import.meta.env.VITE_CANVAS_BACKGROUND_COLOR
</script>

<style lang="scss" scoped>
$background-color: v-bind(backgroundColor);
$right-side-width: 4.5rem;
.page-main {
  position: relative;
  display: flex;
  background-color: $background-color;
  .right-side {
    width: $right-side-width;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #0a3c85 #07275b;
    scrollbar-width: thin;
  }
  .fabric-canvas {
    flex: 1 1 calc(100% - $right-side-width);
  }
}
</style>
